<template>
	<view class="wrap u-p-20">
		
		<view class="content">
			<u-form :model="form" ref="uForm" :rules="formRule" :error-type="['message']" label-width="160">
				<u-form-item label="" prop="username">
					<u-input v-model="form.username" placeholder="请输入用户名" />
				</u-form-item>
				<u-form-item label="" prop="email">
					<u-input v-model="form.email" placeholder="请输入邮箱" />
				</u-form-item>
				<u-form-item label="" prop="password">
					<u-input type="password" v-model="form.password" placeholder="请输入密码" />
				</u-form-item>
				<u-form-item label="" prop="password_confirmation">
					<u-input type="password" v-model="form.password_confirmation" placeholder="请输入确认密码" />
				</u-form-item>
			</u-form>
			<u-button class="u-m-t-30" type="primary" @click="register">注册</u-button>
			
			<view style="color: #DD524D;">这是注册页面, 用户在这注册账号使用该系统</view>
			<view style="color: #DD524D;">现在实现了很简单的注册</view>
		</view>
		
	</view>
</template>

<script>
	import {APIRegister} from '../../config/api.js';
	
	export default {
		data() {
			return {
				form: {
					username: '', // 昵称/用户名
					email: '', // 邮箱
					password: '', // 密码
					password_confirmation: '', // 确认密码
				},
			}
		},
		methods: {
			register(){
				console.log('注册');
								
				// 获取表单数据
				const params = {
					username: this.form.username,
					email: this.form.email,
					password: this.form.password
				}
				
				// 注册
				APIRegister(params).then(res => {
					console.log(res);
					this.$u.toast("注册成功")
					setTimeout(function(){
						// 跳转到登录页面
						uni.$u.route({
							type: 'reLaunch',
							url:'pages/auth/login'
						})
					}, 3000)
				}).catch(err => {
					console.log(err);
					this.$u.toast("注册失败: " + err.data.data.message)
				})
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		font-size: 28rpx;
	
		.content {
			width: 88%;
			margin: 80rpx auto 0;
	
			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}
		}
	}
</style>
